<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.10.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.10.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.10.2/themes/color.css">
    <script type="text/javascript" src="jquery-easyui-1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.10.2/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-layout" style="width:700px;height:350px;" fit="true">
    <div data-options="region:'north'" style="height:50px">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
    </div>
    <div data-options="region:'center',title:'用户信息表',iconCls:'icon-ok'" style="width: 100%;height: 700px">
        <div align="center">
            <table id="dg" title="用户信息表" class="easyui-datagrid" style="width:800px;height:500px"
                   data-options="url:'qry',toolbar:'#toolbar',pagination:true,rownumbers:true,singleSelect:true,fit:true,fitColumns:true">
                <thead>
                <tr>
                    <th field="id" width="50px">学号</th>
                    <th field="name" width="50px">姓名</th>
                    <th field="sex" width="50px">性别</th>
                    <th field="birthd" width="50px">生日</th>
                    <th field="addr" width="50px">地址</th>
                    <th field="email" width="50px">邮箱</th>
                </tr>
                </thead>
            </table>
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
                   onclick="newUser()">新增</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
                   onclick="editUser()">编辑</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
                   onclick="destroyUser()">移除</a>
            </div>
            <div id="dlg" class="easyui-dialog" style="width:400px"
                 data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
                <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
                    <h3>用户信息</h3>
                    <div style="margin-bottom:10px">
                        <input name="name" class="easyui-textbox" required="true" label="姓名:" style="width:100%">
                    </div>
                    <%--<div style="margin-bottom:10px">
                                    <input name="sex" class="easyui-textbox" required="true" label="性别:" style="width:100%">
                                </div>--%>
                    <div style="margin-bottom:20px">
                        <span>性别：</span>
                        <input class="easyui-radiobutton" name="sex" value="男" label="男">
                        <input class="easyui-radiobutton" name="sex" value="女" label="女">
                    </div>
                    <div style="margin-bottom:10px">
                        <input name="birthd" class="easyui-datebox" required="true" label="生日:" style="width:100%"
                               data-options="formatter:myformatter,parser:myparser">
                        <%--                <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>--%>
                    </div>
                    <div style="margin-bottom:10px">
                        <input name="addr" class="easyui-textbox" required="true" label="地址:" style="width:100%">
                    </div>
                    <div style="margin-bottom:10px">
                        <input name="email" class="easyui-textbox" required="true" validType="email" label="邮箱:"
                               style="width:100%">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()"
           style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
           onclick="javascript:$('#dlg').dialog('close')" style="width:90px">关闭</a>
    </div>
    <script type="text/javascript">
        var url;

        function newUser() {
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增用户');
            $('#fm').form('clear');
            url = 'add';
        }

        function editUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Edit User');
                $('#fm').form('load', row);
                url = 'update_user?id=' + row.id;
            }
        }

        function saveUser() {
            $('#fm').form('submit', {
                url: url,
                onSubmit: function () {
                    return $(this).form('validate');
                },
                success: function (result) {
                    console.log(result)
                    let res = JSON.parse(result);
                    console.log(res)
                    if (res.errorMsg) {
                        console.log("进入异常输出")
                        $.messager.show({
                            title: '错误',
                            msg: res.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#dg').datagrid('reload');    // reload the user data
                    }
                }
            });
        }

        function destroyUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function (r) {
                    if (r) {
                        $.post('destroy_user.php', {id: row.id}, function (result) {
                            if (result.success) {
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            }
                        }, 'json');
                    }
                });
            }
        }
    </script>
    <script type="text/javascript">
        function myformatter(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
        }

        function myparser(s) {
            if (!s) return new Date();
            var ss = (s.split('-'));
            var y = parseInt(ss[0], 10);
            var m = parseInt(ss[1], 10);
            var d = parseInt(ss[2], 10);
            if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
                return new Date(y, m - 1, d);
            } else {
                return new Date();
            }
        }
    </script>
</div>
</body>
</html>